 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">操作日志</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <div class="search-item">
            <i-input style="width: 40%" :value.sync="value" placeholder="用户ID"></i-input>
            <i-select :model.sync="model" style="width: 40%; color: #000;" placeholder="选择系统">
                <i-option v-for="item in statuList" :value="item.value">{{ item.label }}</i-option>
            </i-select>
            <i-button style="background-color: rgb(0, 150, 136); color: white;">搜索</i-button>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <div style="float: left;">
              <Page :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="nowPageSize" show-total show-sizer show-elevator></Page> <!-- page组件 -->
            </div>
          </div>
        </div>
      </div>
   </Card>

 </template>
 <script>
 let testData = {
   histories: [
     {
       userId: "1",
       userName: "xx",
       userIP: "113.13.213.172",
       system: "运营平台",
       business: "修改系统消息",
       idea: "org.xxpay.manage.sys.ctrl.SysMessageController.update",
       request: {
         id:"1",
         title:"啦啦啦",
         message:"哈哈哈哈哈哈",
         status:"1"
         },
       response: "<200 OK,BizResponse{code=0, msg='success'},{}>",
       time: "2020-10-12 09:07:04",
     }
   ]
 };
 import axios from "../../libs/axios.js";
 export default {
   name: 'edit_log',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       ajaxHistoryData: [],
       exportdata: [],
       // 初始化信息总条数
       dataCount: 0,
       // 每页显示多少条
       pageSize: 10,
       pageCurrent: 1,//当前页
       foodColumns: [
         {
           title: "用户ID",
           key: "userId"
         },
         {
           title: "用户名",
           key: "userName"
         },
         {
           title: "用户IP",
           key: "userIP"
         },
         {
           title: "系统",
           key: "system"
         },
         {
           title: "业务描述",
           key: "business"
         },
         {
           title: "方法",
           key: "idea"
         },
         {
           title: "请求参数",
           key: "request"
         },
         {
           title: "响应结果",
           key: "response"
         },
         {
           title: "创建时间",
           key: "time"
         }
       ],
       foodData: [],
       statuList: [
         {
           value: 'being',
           label: '选择系统'
         },
         {
           value: 'beijing',
           label: '运营平台'
         },
         {
           value: 'shanghai',
           label: '商户'
         },
         {
           value: 'sanghai',
           label: '代理商'
         }
       ],
       model: ''
     };
   },
   methods: {
     // 获取历史记录信息
     handleListApproveHistory() {
       // 保存取到的所有数据
       this.ajaxHistoryData = testData.histories;
       this.exportdata = testData.histories;
       this.dataCount = testData.histories.length;
       // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
       if (testData.histories.length < this.pageSize) {
         this.foodData = this.ajaxHistoryData;
       } else {
         this.foodData = this.ajaxHistoryData.slice(0, this.pageSize);
       }
     },
     // 点击切换页面
     changepage(index) {
       //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
       let _start = (index - 1) * this.pageSize;
       //需要显示结束数据的index
       let _end = index * this.pageSize;
       //截取需要显示的数据
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //储存当前页
       this.pageCurrent = index;
     },
     //每页显示的数据条数
     nowPageSize(index) {
       let _start = (this.pageCurrent - 1) * index;
       let _end = this.pageCurrent * index;
       this.foodData = this.ajaxHistoryData.slice(_start, _end);
       //实时获取当前需要显示的条数
       this.pageSize = index;
     }
   },
   created() {
     this.handleListApproveHistory();
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 65px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-select-item-selected, .ivu-select-item-selected:hover{
       color: #fff;
       background-color: #5FB878;
     }
     .ivu-table-cell{
       padding-left: 7px;
       padding-right: 7px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-break: break-all;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
     .content-con{
       margin: 15px;
       .bank-search{
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
         .search-item{
           display: flex;
           justify-content: space-between;
         }
       }
       .bank-form{
         margin-top: 15px;
       }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
